@extends('layouts.front')

@section('content')
@push('styles')

@endpush
<div class="pro-details" style="margin-bottom: 50px;" >
    <div class="swiper-container banner-pro-container">
        <div class="swiper-wrapper banner-wrapper">
            @if(count($product->pic_group) > 0)
                @foreach ($product->pic_group as $pic)
                <div class="swiper-slide banner-pro">
                    <img src="/{{ $pic }}" alt="">
                </div>
                @endforeach
            @endif
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div class="pro-info">
        <div class="pro-info-h">
            <div class="pro-name">{{ $product->name }} {{ $product->info }}</div>
            <div class="pro-des">现货</div>
        </div>
        <div class="pro-info-m">
            <div class="pro-address">{{ $shop->address }}</div>
        </div>
        <div class="pro-info-b">
            <div class="price-group">
                <span class="pro-price">{{ $product->price }}</span>
                <span>元</span>/
                <span class="pro-unit">{{ $product->unit }}</span>
            </div>
        </div>
    </div>

    <div class="pro-bsn-info">
        <div class="bsn-avator">
            <img src="{{ $shop->avatar }}" alt="">
        </div>
        <div class="bsn-des">
            <span class="bsn-name">
                {{ $shop->name }}
            </span>
            <span class="bsn-level">
                诚信等级：
                <span class="bsn-level-value">1级</span>
            </span>
        </div>
    </div>

    <div class="pro-spe">
        <div class="pro-spe-head">
            详细规格
        </div>
        <div class="pro-spe-body">
            {{ $product->description }}
            <div class="img-group" style="text-align: center;" >
            @if(count($product->pic_group) > 0)
                @foreach ($product->pic_group as $pic)
                    <img src="/{{ $pic }}" alt="" style="max-width: 100%;" >
                @endforeach
            @endif
            </div>
        </div>
    </div>

    <div class="bottom-bar" to="/addressCreate">
        <div class="bottom-bar-action">
            <a href="/"><i class="icon iconfont icon-home1"></i> 回首页</a>
        </div>
        <div class="bottom-bar-action">
            <a id="addCart" href="javascript: void(0)"><i class="icon iconfont icon-buy"></i> 立即购买</a>
        </div>
        <div class="bottom-bar-action">
            <a href="tel:{{ $shop->tel }}"><i class="icon iconfont icon-tel"></i> 打电话</a>
        </div>
    </div>
</div>

@section('tabbar')
@endsection

@push('scripts')
<script>
    var vm = new Vue({
        el: '#app'
    });

    $(document).ready(function() {
        window.addEventListener("popstate", function(e) {
            window.location.href = '/market.html';
        }, false); 
        var state = { 
            title: "title", 
            url: "#"
        }; 
        window.history.pushState(state, "title", "#");

        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
        });

        $('#addCart').on('click', function() {
            $.ajax({
                url: '{{ route("shopping.addCart") }}',
                type: 'post',
                dataType: 'json',
                data: {
                    pid: '{{ $product->id }}'
                },
                success: function(res) {
                    if (res.status === 'success') {
                        window.location.href = '{{ route("shopping.checkOut") }}';
                    }
                }
            });
        })
    });
</script>
@endpush
@endsection
